FlyTalk.views.NotificationView = Ext.extend(Ext.Panel, {

	scroll: true,
    initComponent: function () {
		
    	this.backButton = new Ext.Button({
			text: 'Back',
			ui: 'back',
			handler: this.backButtonTap,
			scope: this
		});
    	
		this.toolbar = new Ext.Toolbar({
			title: 'Notifications',
			doc: 'top',
			layout: 'hbox',
			items: [
			    this.backButton,
				{xtype: 'spacer'},
			]
		});
		

    	this.doneButton = new Ext.Button({
			text: 'Done',
			ui: 'small',
			//height: 30,
			style: 'background: #f7941d; color: #fff; margin: 3px',
		    pack: 'right',
		//	style: 'background-color: black',
			handler: this.noteButtonTap,
			scope: this
		});
		
		this.noteButton = new Ext.Button({
			html: "Notifications",
			cls: 'noteBtn', // change this in app.css .x-button.noteBtn.x-button-normal 
			ui: 'normal',
			style: 'margin-left: 95px',
			handler: this.noteButtonTap,
			//pack: 'center',
			//style: 'margin: auto;',
			//pack: 'center',
			//align: 'stretch',
			//width: 320,
//			badgeText: '3',
			width: 130,
			height: 40,
			scope: this
		});
		
		this.notePanel = new Ext.Panel({
			scroll: false,
            fullscreen: false,
            dock: 'top',
			//align: 'stretch',
			width:320,
			height:40,
			layout:{
			type: 'hbox',
		    pack: 'center',
		    //align: 'stretch'
		    	},

			cls: 'notebar', // change this in app.css x-panel.notebar
			items: [
					this.noteButton, 
			    	{xtype: 'spacer'},
			        this.doneButton
			        ],
		});
		
		this.dockedItems = [
		                    //this.toolbar, 
		                    this.notePanel,
		                    ];
		
		Ext.regModel('NoteModel', {
			fields: [
				{name: 'id', type: 'int'},
				{name: 'uid', type: 'int'},
				{name: 'thread_id', type: 'int'},
				{name: 'type', type: 'string'},
				{name: 'text', type: 'string'},
				{name: 'read', type: 'string'},
				{name: 'date', type: 'string'},
			]
		});
		
		this.noteStore = new Ext.data.JsonStore({
			model : 'NoteModel',
//			sorters: 'read',
//			getGroupString: function(record){
//				record.get('read');
//			}
			/*
			data: [
				{id: 1, uid: 4, thread_id: 62, type: 'replied', text: 'help me', read: 'unread'},
				{id: 1, uid: 4, thread_id: 62, type: 'replied', text: 'help me', read: 'unread'},
			],*/
		});
			
		this.list = new Ext.List({
			width: 320,
			itemTpl :
					"<div style='float: left; width: 250px'>" +
					"<img height='33' width='33' src='images/note_{type}_{read}.png' style='margin-right: 0.7em; float: left'>" +
					"<div style='font-size: small;' class='note_{read}' style='width: 100px'>{text} " +
						"<span style='color: #aaaaaa'>{date}</span>" +
					"</div></div>" +
					"<div style='float:right; width: 35px; padding-right: 0px; margin-right: 0em;' width='35' class='arrow'><img src='images/arrowInBubble.png' width='30' height='30'></div>",	
//					'<div class="list-icon"> <img width=36px src="./images/note_{type}_{read}.png">' + 
//					'</div> <div class="list-block"><h1 class="list-detail-large">{text}</h1> <p class="list-detail-small">{date}</p></div>' + 
//					'<div class="arrow" style="float:right;"><img src="images/arrowInBubble.png" width="30" height="30"></div>',
					
			store: this.noteStore,
			scroll: true,
			//grouped: true,
			fullscreen: false,
			listeners:{
				itemTap: function(dv, index, item, e){
					if(e.getTarget('.arrow')){
						var note = FlyTalk.views.NotificationView.noteStore.getAt(index).data;
						var type = note.type;
						var thread = note.thread_id;
						//alert('work in progress');
						
						if(type == 'announced' || type == 'replied'){ // go to reply
							if(type == 'announced'){
								FlyTalk.views.PostView.postToolbar.setTitle("Announcement");
								FlyTalk.views.PostView.dismissButton.setText("Dismiss");
								FlyTalk.views.PostView.dismissButton.show();
							}else if(type == 'replied'){
								FlyTalk.views.PostView.postToolbar.setTitle("Your reply");
								FlyTalk.views.PostView.dismissButton.setText("Resolve");
								FlyTalk.views.PostView.dismissButton.show();
							}
							//alert('clicked on announced or replied. work in progress...');
							FlyTalk.views.TalkView.tweetToolbar.title = "note";
							
							Ext.dispatch({
					            controller: FlyTalk.controllers.dbController,
					            action: 'openThread',
					            index: thread,
					        });
						}else if(type == 'help'){ // go to help
							if(note.id == 5){ // go to question
								FlyTalk.views.PostView.postToolbar.setTitle("Help Out");
								FlyTalk.views.PostView.dismissButton.setText("Dismiss");
								FlyTalk.views.PostView.dismissButton.show();
								FlyTalk.views.TalkView.tweetToolbar.title = "note";
								
								Ext.dispatch({
						            controller: FlyTalk.controllers.dbController,
						            action: 'openHelp',
						        });
							}else if(note.id == 2){ // go to review
								Ext.dispatch({
						            controller: FlyTalk.controllers.ftController,
						            action: 'openReview',
						          //  index: thread,
						        });
								
							}
						}else if(type == 'services'){ // go to help
							Ext.dispatch({
					            controller: FlyTalk.controllers.ftController,
					            action: 'openService',
								from: 'notif',
					        });
						}else if(type == 'reviewed'){ // open review
							//alert('clicked on announced or replied. work in progress...');
						}
					}
				},
			}			
		});

		this.items = [this.list];
		
		FlyTalk.views.NotificationView.superclass.initComponent.call(this);
        
    },
    
    backButtonTap: function () {
        Ext.dispatch({
            controller: FlyTalk.controllers.ftController,
            action: 'openHome'
        });
    },
    
    noteButtonTap: function () {
    	FlyTalk.views.HomeView.noteButton.setBadge("");
    	FlyTalk.views.mainView.setActiveItem(FlyTalk.views.HomeView, {type: 'slide', direction: 'down'});
    },

});